﻿
@{
    ViewBag.Title = "二手集市";
    Layout = "~/Views/Shared/_MallLayout.cshtml";
    var categorys = ViewBag.categorys as List<token_category_dto>;
    var merber = ViewBag.member as merchant_dto;
    long curUserId = ViewBag.CurUserId;
}
@section style{
    <link href="~/Scripts/mescroll/mescroll.min.css" rel="stylesheet" />
    <link href="~/Content/css/tokenmall/css/swiper.min.css" rel="stylesheet" />
    <style type="text/css">
        .swiper-slide {
            width: auto;
            padding:0 0.4rem;
        }
        .mod-type-x span i {
            bottom:0;
        }
    </style>
}
    <body class="page-index page-market">
        <!--header end-->
        <div class="search search2">
            <div class="box">
                @*<input class="searchInput" type="text" placeholder="请输入需要搜索的商品" id="keyword">*@
                <span class="col-gray searchInput" id="keyword">请输入需要搜索的商品</span>
                <span class="right">
                    <i class="line"></i>
                    <a href="#" class="contactUs">
                        <i class="icon-search"></i>
                    </a>
                </span>
            </div>
        </div>
        <div id="scrollTop" class="mod-type-x mb20 swiper-container" style="overflow:auto">
            <div class="typeBox swiper-wrapper">
                <span class="swiper-slide cur">精品推荐<i></i></span>
                @if (categorys.Count > 0) {
                    foreach (var item in categorys) {
                        <span class="swiper-slide" value="@item.id">@item.name<i></i></span>
                    }
                }
            </div>
        </div>
        <div class="mescroll" id="mescroll">
            <div class="mod-fallsceshi">
                <div class="masonry" id="dataList">
                </div>
            </div>
        </div>
        <!-- 底部导航 -->
        <div class="lt-footNav">
            <ul>
                <li class="cur">
                    <a href="/BazaarProduct/Index">
                        <i class="icon-footNav6"></i>
                        <p>集市</p>
                    </a>
                </li>
                <li>
                    <a href="#" id="edit_product">
                        <i class="icon-footNavAdd"></i>
                    </a>
                </li>
                <li>
                    <a href="javascript:toMine();">
                        <i class="icon-footNav5"></i>
                        <p>我的</p>
                    </a>
                </li>
            </ul>
        </div>
        <a class="goTop">
            <img src="~/Content/css/tokenmall/img/icon/goTop.png" />
        </a>
    </body>
@section scripts{
    <script src="~/Scripts/tokenmall/masonry-docs.min.js"></script>
    <script src="~/Scripts/tokenmall/imagesloaded.min.js"></script>
    <script src="~/Scripts/mescroll/mescroll.min.js"></script>
    <script src="~/Scripts/tokenmall/swiper.min.js"></script>
    <script src="~/Scripts/token-common.js"></script>
    <script>
        function toMine() {
            var userId = Number('@curUserId');
            if (userId == 0) {
                var loginResult = isLogin();
                if (!loginResult)
                    return loginResult;
            }
            window.location.href = '/BazaarOrder/Index';
        }
        $(function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto'
            });

            var $container = $('.masonry');
            var total_pages = 1;
            var keyword = "";
            var category_id = 0;
            var is_recommend = true;
            var isload = false;
            var dataUrl = '/BazaarProduct/_Index';
            var mescroll = new MeScroll("mescroll", {
                down: {
                    auto: false,
                    callback: function (mescroll) {
                        $container.html('');
                        $container.masonry('layout');
                        mescroll.resetUpScroll();
                    }
                },
                up: {
                    callback: askData,
                    page: { num: 0, size: 6 },
                    clearEmptyId: "dataList",
                    isBounce: false,
                    noMoreSize: 3,
                    htmlNodata: '<p class="upwarp-nodata">亲,我是有底线的~</p >',
                    empty: { warpId: "dataList", icon: "", tip: "亲,暂时没有数据哦~" }
                }
            });
            //异步请求数据
            function askData(pager) {
                if (!isload && total_pages >= pager.num) {
                    isload = true;
                    $.ajax({
                        type: "post",
                        url: dataUrl,
                        params: "contentType",
                        data: { page: pager.num, size: pager.size, product_name: keyword, category_id: category_id, is_recommend: is_recommend },
                        async: true,
                        success: function (res) {
                            var $elems = $(res);
                            var paged = $elems.siblings("page");
                            var rows = Number.parseInt(paged.attr("rows"));
                            var total = Number.parseInt(paged.attr("total_result"));
                            mescroll.endBySize(rows, total);
                            if (paged.length == 1) {
                                total_pages = Number.parseInt(paged.attr("total_pages"));
                                msnryobj.masonryImagesReveal($elems);
                                $('#dataList page').remove();
                            } else {
                                $(".upwarp-nodata").html('亲,暂时没有数据哦~');
                            }
                            isload = false;
                        },
                        error: function (err) {
                            isload = false;
                            mescroll.endErr();
                        }
                    });
                }
            }
            var width = $container.width() / 2;
            var msnryobj = $container.masonry({ itemSelector: '.item', gutter: 0, columnWidth: width, isAnimated: true });
            $.fn.masonryImagesReveal = function ($items) {
                var msnry = this.data('masonry');
                var itemSelector = msnry.options.itemSelector;
                $items.hide();
                this.append($items);
                $items.imagesLoaded().progress(function (imgLoad, image) {
                    if (!$(image.img).hasClass("profile")) {
                        var $item = $(image.img).parents(itemSelector);
                        $item.show();
                        msnry.appended($item);
                    }
                });
                return this;
            };
            $(".typeBox").on("click", "span", function () {
                var index = $(this).index();
                $(this).addClass("cur").siblings().removeClass("cur");
                if (index === 0) { is_recommend = true; category_id = 0; }
                else { is_recommend = false; category_id = $(this).attr("value"); }
                $container.html('');
                $container.masonry('layout');
                //重置列表数据
                mescroll.resetUpScroll();
                //隐藏回到顶部按钮
                mescroll.hideTopBtn();
            });
            $("#keyword").click(function (e) {
                location.href = '/BazaarProduct/Search';
            });
            $("#edit_product").click(function () {
                var userId = Number('@curUserId');
                if (userId == 0) {
                    var loginResult = isLogin();
                    if (!loginResult)
                        return loginResult;
                }
                var usestype = '@(merber.usertype.HasValue? (int)merber.usertype.Value:0)'
                if (usestype >= 6) {
                    try {
                        if (browser.versions.ios) {
                            window.webkit.messageHandlers.BazaarProductEdit.postMessage(0);
                        } else if (browser.versions.android) {
                            androidfuntion.BazaarProductEdit(0)
                        }
                    } catch (e) {
                        if (browser.versions.ios || browser.versions.android) {
                            layer.msg("请升级app");
                        }
                        else {
                            layer.msg("请在app内操作");
                        }
                    }
                } else
                    layer.msg("需要您成为创客开启红钻集市");
            });
        });
    </script>

    @*<script type="text/javascript">
        var h = $('#scrollTop').offset().top;
        $(window).scroll(function () {
            var rollTop = $(this).scrollTop();
            if (rollTop > h) {
                $("#scrollTop").addClass('fn-fixed');
            } else {
                $("#scrollTop").removeClass('fn-fixed');
            }
        });
    </script>*@
}